<template>
  <Card
    class="monitor1-card1"
    :videoInfo="videoInfo"
    style="width:100%;min-height:600px;background:#01237C;"
  >
    <p slot="title" style="padding-left: 60px;">
      {{ videoInfo.title }}
    </p>
    <RadioGroup slot="extra" v-model="switchWay" @on-change="handleWays" type="button">
      <Radio label="线路一" style="background-color:rgba(0,0,0,0);height:30px;font-size:20px;font-weight:bold;"></Radio>
      <Radio label="线路二" style="background-color:rgba(0,0,0,0);height:30px;font-size:20px;font-weight:bold;"></Radio>
    </RadioGroup>
    <div>
      <MyVideoRTMP v-if="switchWay === '线路一'" :src="videoInfo.videoSrc"></MyVideoRTMP>
      <video-player v-else :src="videoInfo.flvsrc"></video-player>
    </div>
  </Card>
</template>

<script>
// 视频
import MyVideoRTMP from "@/components/myvideo/MyVideoRTMP";
import VideoPlayer from "@/components/myvideo/videoPlayer";

export default {
  name: "myVideo",
  props: {
    videoInfo: {
      type: Object
    }
  },
  data() {
    return {
      switchWay: '线路一'
    }
  },
  watch: {
    videoInfo: {
      deep: true,
      handler() {
        console.log("监控视频响应：", this.videoInfo);
      }
    }
  },
  components: {
    MyVideoRTMP,
    VideoPlayer
  },
  methods: {
    handleWays () {
      console.log(this.switchWay)
    }
  }
};
</script>

<style lang="less">
.monitor1-card1 .ivu-card-bordered {
  border: 1px solid #0a4271 !important;
  border-color: #0a4271 !important;
}
.monitor1-card1 .ivu-card-head {
  padding: 4px 15px !important;
  border-bottom: 1px solid #0b0f34 !important;
  /* background-color: #13a4c2 !important; */
  background-color: #0b0f34 !important;
  background-image: url("../../assets/title-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50px;
}
.monitor1-card1 .ivu-card-head p {
  font-size: 2rem !important;
  height: 50px !important;
  line-height: 50px !important;
  // margin-top: 4px;
  color: #fff !important;
  text-align: left;
}
.monitor1-card1 .ivu-card-body {
  padding: 0px !important;
}
</style>
